<template>
  <el-drawer
    v-model="showDrawer"
    :title="$t('转入')"
    size="420px"
    @close="emit('close')"
  >
    <template #header>
      <div class="card-header">
        <span>{{ $t("转入") }}</span>
      </div>
    </template>
    <div class="detailItem">
      <span style="flex-shrink: 0" class="mb-1 text-color1">{{
        $t("用户ID")
      }}</span>
      <div style="word-break: break-all">{{ currentData.uid }}</div>
    </div>
    <div class="detailItem">
      <span style="flex-shrink: 0" class="mb-1 text-color1">{{
        $t("用户账号")
      }}</span>
      <div style="word-break: break-all">{{ currentData.account_name }}</div>
    </div>
    <!-- <div class="detailItem">
      <span style="flex-shrink: 0" class="mb-1 text-color1">{{
        $t("账户余额")
      }}</span>
      <div style="word-break: break-all">{{ currentData.available || 0 }}</div>
    </div> -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
      label-position="top"
      ><el-form-item :label="$t('转入数量')" prop="amount">
        <el-input
          v-model="ruleForm.amount"
          type="number"
          @input="handleNNDInput"
          :placeholder="$t('请输入转入数量')"
        >
          <template #append>USDT</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('备注')" prop="msg">
        <el-input
          v-model="ruleForm.msg"
          type="textarea"
          :rows="4"
          :placeholder="$t('请输入备注')"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div class="flex items-center justify-center mt-10">
      <el-button
        type="primary"
        :plain="true"
        class="w-full custom-button plainButton"
        @click="onSubmit(ruleFormRef)"
        >{{ $t("提交") }}</el-button
      >
    </div>
  </el-drawer>
  <el-dialog
    v-model="centerDialogVisible"
    :title="$t('确认转入')"
    width="500"
    center
  >
    <div class="flex flex-col items-center justify-center text-base">
      <span style="flex-shrink: 0" class="mb-1 text-color1">{{
        $t("用户ID")
      }}</span>
      <div style="word-break: break-all; color: #333">
        {{ currentData.uid }}
      </div>
    </div>
    <div class="flex flex-col items-center justify-center mt-6 text-base">
      <span style="flex-shrink: 0" class="mb-1 text-color1">{{
        $t("转入金额")
      }}</span>
      <div style="word-break: break-all; color: #333">
        {{ ruleForm.amount }} USDT
      </div>
    </div>
    <div
      class="flex flex-col items-center justify-center mt-6 text-base"
      v-if="ruleForm.msg"
    >
      <span style="flex-shrink: 0" class="mb-1 text-color1">{{
        $t("备注")
      }}</span>
      <div style="word-break: break-all; color: #333">
        {{ ruleForm.msg }}
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="centerDialogVisible = false"
          class="w-[120px] mr-6"
          >{{ $t("取消") }}</el-button
        >
        <el-button type="primary" @click="confirm" class="w-[120px]">
          {{ $t("确认") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
import { UserTransferApi } from "@/api/account/index";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";
import _ from "lodash";
const { t } = useI18n();
const ruleForm = reactive({
  amount: "",
});
// const validateAmount = (rule, value, callback) => {
//   if (value === "") {
//     callback(new Error(t("请输入转入数量")));
//   } else {
//     if (Number(ruleForm.name) > Number(props.currentData.amount)) {
//       callback(new Error(t("余额不足，请充值")));
//     }
//     callback();
//   }
// };

const rules = reactive({
  amount: [{ required: true, message: t("请输入转入数量"), trigger: "blur" }],
});

const centerDialogVisible = ref(false);
const ruleFormRef = ref();
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  currentData: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(["close"]);
const showDrawer = ref(false);
watch(
  () => props.show,
  (newVal) => {
    showDrawer.value = newVal;
  }
);

const handleNNDInput = (val) => {
  if (isNaN(val) || val <= 0) {
    ruleForm.amount = "";
  } else {
    ruleForm.amount = Number(val);
  }
};

const onSubmit = async (formEl) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      centerDialogVisible.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const confirm = async () => {
  console.log({
    uid: props.currentData.uid,
    amount: ruleForm.amount,
    msg: ruleForm.msg,
  });
  try {
    await UserTransferApi({
      uid: props.currentData.uid,
      amount: ruleForm.amount,
      msg: ruleForm.msg,
    });
    centerDialogVisible.value = false;
    ElMessage.success(t("转入成功"));
  } catch {
    centerDialogVisible.value = false;
  }
  emit("close", true);
};
</script>
<style lang="scss" scoped>
.detailItem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 16px;
}
.btn {
  height: 40px;
}
</style>
